<script>
import { useVModel } from '@vueuse/core'
import { provide } from '@vue/runtime-core'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup (props, { emit }) {
    // 接收v-model的值
    const activeName = useVModel(props, 'modelValue', emit)
    // 点击选项卡触发的函数
    const tabClick = (name) => {
      console.log(name)
      activeName.value = name
    }
    // 给每一个panel传当前激活的name
    provide('activeName', activeName)
    return { activeName, tabClick }
  },
  render () {
    // 返回的内容会进行渲染
    // 不可以在这里写vue的指令
    // 1. 在babel的帮助下，可以在vue中编写jsx语法
    // 2. 数据的使用
    // 3. 事件绑定
    // 4. 定义一个jsx对象
    // const sub = <sub>我是jsx对象</sub>
    // const name = 'tom'
    // const title = 'title'
    // const say = () => {
    //   console.log('hi,jsx')
    // }
    // return <h1 title={title} onClick={say}>{name}{ sub }</h1>

    // 在这里进行组织
    // 1. tabs组件大容器
    // 2. 选项卡导航菜单结构
    // 3. 内容容器
    // 获取插槽
    const panels = this.$slots.default()
    // 动态panels组件集合
    const dynamicPanels = []
    panels.forEach(item => {
      if (item.type.name === 'XtxTabsPanel') {
        dynamicPanels.push(item)
      } else {
        item.children.forEach(item => {
          dynamicPanels.push(item)
        })
      }
    })
    // console.log(panels)
    const nav = <nav>{
      dynamicPanels.map((item, i) => {
        return <a
          class={{ active: item.props.name === this.modelValue }}
          href="javascript:;"
          onClick={() => this.tabClick(item.props.name)}>{item.props.label}</a>
      })
    }</nav>
    return <div class="xtx-tabs">{ [nav, dynamicPanels]}</div>
  }
}
</script>

<style lang="less" scoped>
.xtx-tabs{
  background-color: #fff;
  >nav{
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    >a{
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active{
        border-top: 2px solid @xtxColor;
        height: 60px;
        line-height: 56px;
        background-color: #fff;
      }
    }
  }
}
</style>
